<template>
  <div class="loading">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <span v-if="showtext">正在努力加载...</span>
  </div>
</template>

<script>
export default {
  props: {
    showtext: {
      type: Boolean,
      default: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  //   position: relative;
  margin: 20px 0;

  ul {
    display: flex;
    height: 20px;
    li {
      height: 20px;
      width: 2px;
      margin-left: 2px;
      background: red;
      transform-origin: bottom;
      animation: jup 0.5s linear infinite;
      &:first-child {
        animation-delay: -0.2s;
      }
      &:nth-child(2) {
        animation-delay: -0s;
      }
      &:nth-child(3) {
        animation-delay: 0.1s;
      }
      &:nth-child(4) {
        animation-delay: 0.2s;
      }
      &:nth-child(5) {
        animation-delay: 0.3s;
      }
    }
  }

  span {
    // position: absolute;
    // bottom: -20px;
    font-size: 16px;
    line-break: 20px;
    margin-left: 5px;
    color: gray;
  }
}
@keyframes jup {
  0% {
    transform: scaleY(0.5);
  }
  50% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(0.5);
  }
}
</style>